<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta title="数据展示" />
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <title>数据展示</title>
</head>
<style>
    html,
    body {
        overflow-x:hidden;
        overflow-y:hidden;
        height: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
    }
    body{

    }
    .chart-panel{
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .chart-panel .border-box{
        position: absolute;
        width: 15%;
        height: 35%;
        background-color: rgb(4, 167, 140);
    }
    .chart-panel .box-left{
        left: 0;
    }
    .chart-panel .box-right{
        right: 0;
    }
    .chart-panel .box-top{
        top: 0;
    }
    .chart-panel .box-top-left{
        border-radius: 0 0 10px 0;
    }
    .chart-panel .box-top-right{
        border-radius: 0 0 0 10px;
    }
    .chart-panel .box-bottom-left{
        border-radius: 0 10px 0 0;
    }
    .chart-panel .box-bottom-right{
        border-radius: 10px 0 0 0;
    }
    .chart-panel .box-bottom{
        bottom: 0;
    }
    .chart-panel .my-chart {
        /*width: 600px;*/
        /*height: 600px;*/
        width: 70%;
        height: 80%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        z-index: 5;
    }

</style>
<body>
<div class="chart-panel">
    <div class="border-box box-top box-left box-top-left"></div>
    <div class="border-box box-top box-right box-top-right"></div>
    <div class="my-chart"></div>
    <div class="border-box box-bottom box-left box-bottom-left"></div>
    <div class="border-box box-bottom box-right box-bottom-right"></div>
</div>
<script type="text/javascript">
    (function (root, factory) {
        if (typeof define === 'function' && define.amd) {
            // AMD. Register as an anonymous module.
            define(['exports', 'echarts'], factory);
        } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
            // CommonJS
            factory(exports, require('echarts'));
        } else {
            // Browser globals
            factory({}, root.echarts);
        }
    }(this, function (exports, echarts) {
        var log = function (msg) {
            if (typeof console !== 'undefined') {
                console && console.error && console.error(msg);
            }
        };
        if (!echarts) {
            log('ECharts is not Loaded');
            return;
        }
        var colorPalette = ['#d87c7c','#919e8b', '#d7ab82',  '#6e7074','#61a0a8','#efa18d', '#787464', '#cc7e63', '#724e58', '#4b565b'];
        echarts.registerTheme('vintage', {
            color: colorPalette,
            backgroundColor: '#fef8ef',
            graph: {
                color: colorPalette
            }
        });
    }));


    var myChart = echarts.init(document.querySelector(".my-chart"));
    var colors = ['#5793f3','#d14a61','#675bba','rgb(4, 167, 140)'];
    var option = {
        legend: {},
        color: colors,
        tooltip: {
            trigger: 'axis',
            showContent: false
        },
        dataset: {
            source: [
                ['年度', '2012', '2013', '2014', '2015', '2016', '2017'],
                ['收入', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
                ['支出', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
                ['来款', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
                ['外借', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
            ]
        },
        xAxis: {type: 'category'},
        yAxis: {gridIndex: 0},
        grid: {top: '55%'},
        series: [
            {type: 'line', smooth: true, seriesLayoutBy: 'row'},
            {type: 'line', smooth: true, seriesLayoutBy: 'row'},
            {type: 'line', smooth: true, seriesLayoutBy: 'row'},
            {type: 'line', smooth: true, seriesLayoutBy: 'row'},
            {
                type: 'pie',
                id: 'pie',
                radius: '30%',
                center: ['50%', '25%'],
                // label: {
                //     formatter: '{b}: {@2012} ({d}%)'
                // },
                // encode: {
                //     itemName: '年度',
                //     value: '2012',
                //     tooltip: '2012'
                // },
                roseType:'angle',
                itemStyle:{
                    normal:{
                        shadowBlur:200,
                        shadowColor: colors[3]
                    }
                }
            }
        ]
    };

    myChart.on('updateAxisPointer', function (event) {
        var xAxisInfo = event.axesInfo[0];
        if (xAxisInfo) {
            var dimension = xAxisInfo.value + 1;
            myChart.setOption({
                series: {
                    id: 'pie',
                    label: {
                        formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                    },
                    encode: {
                        value: dimension,
                        tooltip: dimension
                    }
                }
            });
        }
    });
    myChart.setOption(option);
</script>
</body>
</html>
